import React, { useState } from "react";
import style from './style.module.scss'
import url from '../../../assets/images/icon/hdpi/common_icon_back_black_n.png'
import { useNavigate } from "react-router-dom";

const Index: React.FC = () => {
  const [value, setValue] = useState('')
  const navigate = useNavigate()
  const [searchList,setSearchList]=useState<string[]>(JSON.parse(localStorage.getItem('searchList')||'[]'))
  const handleSearch=()=>{
    if (value!== "") {      
      const newList = [...searchList,value]
      setSearchList(newList)
      localStorage.setItem('searchList',JSON.stringify(newList))
      navigate('/my/search/result', {
        state: {
          value
        }
      }) 
    }
  }
  return <div>
    <div className={style.navbar}>
      <img src={url} alt="" onClick={()=>{
        navigate(-1)
      }}/>
      <input type="text" value={value} onChange={(e) => {
        setValue(e.target.value)
      }} />
      <button onClick={() => {
       handleSearch()
      }}
      onKeyDown={(e)=>{
        if (e.keyCode===13) {
          handleSearch()
        }
      }}
      >搜索</button>
    </div>
    <div className={style.content}>
      <div className={style.history}>
        <p className={style.title}>搜索历史</p>
        <ul>
          {searchList.map((item,ind)=>{
              return <li key={ind}>{item}</li>
            })}
        </ul>
      </div>
    </div>
  </div>;
};

export default Index;
